<!-- 动态页面 -->
<template>
	<view>
		<!-- 自定义导航 -->
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @clickRight="openUnloadImage">
			<!-- 选项卡导航 -->
			<view  class="flex align-center justify-center font-weight-bold w-100">
				<view
					class="mx-1"
					@click="changeTab(index)"
					v-for="(item, index) in tabBars"
					:key="index"
					:class="tabIndex === index ? 'font-lg text-main' : 'font-md text-light-muted'"
				>
					{{ item.name }}
				</view>
				<!-- <view class="font-md text-light-muted mx-1">话题</view> -->
			</view>
			<!-- 跳转 发布信息页 -->
			<text slot="right" class="iconfont icon-fatie_icon font-lg"></text>
		</uni-nav-bar>
		<!-- 分类详情 -->
		<swiper :current="tabIndex" :duration="150" 
		:style="'height:' + scrollH + 'px;'"
		@change="onChangeTab">
			<!-- 监听当前列表的 触底事件 @scrolltolower-->
			<!-- 关注 列表-->
			<swiper-item>
				<scroll-view scroll-y="true" 
				:style="'height:' + scrollH + 'px;'" 
				@scrolltolower="loadmoreEvent">
					<!-- 引入 封装的 列表组件
					定义自定义事件，接收子组件，发布的follow事件 -->
					<block v-for="(item, index) in list" :key="index">
						<commonListVue :item="item" :index="index" @follow="follow" @doSupport="doSupport"></commonListVue>
						<!-- 引入 全局分割线 组件 -->
						<DividerLine></DividerLine>
					</block>
					<!-- 引入 下拉加载更多组件 -->
					<loadMore v-if="list.length" :loadmore="loadmore"></loadMore>
					<!-- 引入 兜底样式组件 -->
					<noThing v-else></noThing>
				</scroll-view>
			</swiper-item>
			<!-- 话题 -->
			<swiper-item>
				<scroll-view scroll-y="true" 
				:style="'height:' + scrollH + 'px;'"
				>
					<!-- 热门分类 顶部选项卡 -->
					<hotCate :hotCateList="hotCateList"></hotCate>
					<!-- 搜索 输入框 -->
					<view class="p-2">
						<view
							class="bg-light rounded flex align-center justify-center py-2 text-secondary"
							@click="openSearch"
						>
							<text class="iconfont icon-sousuo mr-2"></text>
							搜索话题
						</view>
					</view>
					<!-- 轮播图 -->
					<swiper class="px-2 pb-2" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image :src="item.src" style="height: 300rpx;" class="w-100 rounded"></image>
						</swiper-item>
					</swiper>
					<!-- 分割线 -->
					<DividerLine></DividerLine>
					<!-- 最新更新 -->
					<view class="p-2 font-md">最新更新 </view>
					<!-- 引入 话题列表组件 -->
					<block v-for="(item, index) in topicList" :key="index">
						<topicList :item="item" :index="index"></topicList>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 引入 封装的首页 列表组件
	import commonListVue from '@/components/common/common-list.vue';
	// 引入下拉加载更多 组件
	import loadMore from '@/components/common/load-more.vue';
	// 引入 热门分类 选项卡 组件
	import hotCate from '@/components/dynacmic/hot-cate.vue';
	// 引入 话题列表 组件
	import topicList from '@/components/dynacmic/topic-list.vue';
	// 引入 兜底样式 组件
	import noThing from '@/components/common/no-thing.vue';
	export default {
		components: {
			commonListVue,
			loadMore,
			hotCate,
			topicList,
			noThing
		},
		data() {
			return {
				// 顶部导航栏的高度
				// viewHeight: 0,
				// 列表高度
				scrollH: 500,
				// 默认显示第一个，tab选项卡数据
				tabIndex: 0,
				// 顶部tab 切换选项卡数据
				tabBars: [
					{
						name: '关注',
					},
					{
						name: '话题',
					},
				],
				// 列表渲染数据
				list: [],
				// 三种状态 1. 上拉加载更多 2. 加载中... 3. 没有更多了
				loadmore: '上拉加载更多',
				page:1,// 添加分页
				// 热门分类，顶部选项卡数据
				hotCateList: [],
				// 热门话题列表 数据
				topicList: [],
				// 热门 轮播图数据
				swiperList: [{
					id: 1, //轮播图ID
					src: '', //图片路径
					url: '', // 连接地址
					type: 0,
					create_time: null,
				}],
			};
		},
		// 监听页面加载 -----------------------------------------------
		onLoad() {
			// 异步获取 系统信息
			uni.getSystemInfo({
				success: (res) => {
					// 页面可视高度 - 手机状态栏高度 - 顶部导航高度
					this.scrollH = res.windowHeight - res.statusBarHeight - 44
					// #ifndef APP-PLUS
					this.scrollH = res.windowHeight - res.statusBarHeight
					// #endif
				},
			});
			// 获取热门分类 接口
			this.getTopicNav();
			// 获取热门 话题 接口
			this.getHotTopic();
			// 获取轮播图 接口
			this.getSwipers();
			// 监听common-list组件 关注和顶踩
			uni.$on('updateFollSupport', (e) => {
				switch (e.type) {
					case 'follow': // 关注
						this.follow(e.data.user_id);
						break;
					case 'support': // 顶踩 操作
						this.doSupport(e.data);
						break;
				}
			});
		},
		// 页面卸载 时
		onUnload() {
			// 清除 监听事件
			uni.$off('updateFollSupport', (e) => {});
		},
		// 监听页面显示
		onShow(){
			// 不管怎样，都显示第一页
			this.page =1
			// 请求 获取关注好友文章列表  接口
			this.getList()
		},
		// 用于存放 所有事件 -----------------------------------------------
		methods: {
			// 请求 获取关注好友文章列表  接口
			getList(){
				// 如果 页数，处于第一页，那用户就是在刷新页面
				let isRefresh = this.page ===1
				this.$H.get('/followpost/'+this.page,{},{
					token:true,
					notoast:true
				}).then(res=>{
				  // 循环获取到，指定的列表数据，要循环遍历一下
				  let list = res.list.map((v) => {
				  	 // 调用 封装的 工具类utils.js中，转换列表数据方法
				  	 return this.$U.forMatCommonList(v);
				  });
				  this.list = isRefresh ? list : [...this.list, ...list];
				  /* 如果当前 列表数据<10条 ，展示'没有更多了'否则‘下拉加载更多’*/
				  this.loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多';
				  // console.log(this.loadmore);
				  // console.log(this.list);
				}).catch(err=>{ 
					//如果请求失败，页码回到上一页
					if(!isRefresh){
						this.page--
					}
				})
			},
			// 获取热门分类 接口
			getTopicNav() {
				this.$H.get('/topicclass').then((res) => {
					this.hotCateList = res.list.map((item) => {
						return {
							id: item.id,
							name: item.classname,
						};
					});
				});
			},
			// 获取热门 话题 接口
			getHotTopic() {
				this.$H.get('/hottopic').then((res) => {
					this.topicList = res.list.map((item) => {
						return {
							id: item.id, //话题数据 每条 id
							coverImg: item.titlepic, // 话题图片
							title: item.title, // 话题名称
							desc: item.desc, // 话题描述
							news_count: item.post_count, // 动态 数据
							today_count: item.todaypost_count, // 今日 数据
						};
					});
				});
			},
			// 获取轮播图 接口
			getSwipers() {
				this.$H.get('/adsense/0').then((res) => {
					this.swiperList = res.list;
				});
			},
			// 顶部右侧，打开 图片上传发布页
			openUnloadImage() {
				uni.navigateTo({
					url: '../add-input/add-input',
				});
			},
			// 顶部tab,切换选项卡
			changeTab(index) {
				this.tabIndex = index;
			},
			// 滑动 监听 顶部选项卡 实现列表联动
			onChangeTab(e) {
				// e.detail.current 获取到点击的下标
				this.tabIndex = e.detail.current;
			},
			// 关注 -------------------------------------------------
			// 使用自定义事件 follow 关注
			follow(user_id) {
				/* 找到 当前作者的 所有列表数据*/
					this.list.forEach((item) => {
						// 当前点击的用户下的 isFollow (改为true，隐藏关注)
						if (item.user_id === user_id) {
							item.isFollow = !item.isFollow
						}
					});
			},
			// 顶 或 踩 （操作）---------------------------------------
			doSupport(e) {
				// 拿到 当前的分类选项卡 对应的list列表数据
				this.list.forEach((item) => {
					// 拿到 每一条 帖子的id
					// 如果列表数据id 和 顶踩 操作id一致
					if (item.id === e.id) {
						// console.log('顶踩操作',item);
						// 判断之前是否已经 赞 或踩 (之前未操作)
						if (item.support.type === '') {
							/* 4. 点击当前 赞 或 踩 数量+1
							 子组件通过 support 判断样式添加，这里需要拼接子组件发布的type值，点击哪一个就让 此 +1 */
							item.support[e.type + '_count']++;
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							// 如果之前 赞了（判断原数据是赞的，并且 现在点击了 踩）
							// 赞 -1
							item.support.support_count--;
							// 踩 +1
							item.support.unsupport_count++;
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							// 如果之前 踩了（判断原数据是踩的，并且 现在点击了 赞）
							// 赞 +1
							item.support.support_count++;
							// 踩 -1
							item.support.unsupport_count--;
						}
						/* 2. 赋值给，子组件发布的type（赞 或踩）
						   3. 子组件 通过type 判断 添加样式 或 事件 */
						item.support.type = e.type;
					}
				});
				// 消息提示
				let msg = e.type === 'support' ? '点赞成功' : '踩一脚';
				uni.showToast({ title: msg+'成功', duration: 500 });
			},
			// 上拉加载更多
			loadmoreEvent() {
				// 判断是否处于可加载状态（上拉加载更多) 只请求一次接口
				if (this.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				this.loadmore = '加载中...';
			    // 让页码 +1
				this.page++
				// 请求数据
				this.getList()
			},
			// 搜索框 点击事件
			// ?type=post
			openSearch() {
				uni.navigateTo({
					// 保留当前页面，跳转到应用内的某个页面（相当于生成一个新页面)
					// ?type=topic 搜索话题
					url: '../search/search?type=topic',
				});
			},
		},
	};
</script>

<style lang="scss"></style>
